import React, { useEffect, useState } from 'react'
import './SetUp.css'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import {RightOutline} from 'antd-mobile-icons'
export default function SetUp() {
  const navigate = useNavigate()
  const back = () => {
    navigate(-1)
  }
  return (
    <div className='setUp'>
      <div className='shez-top'>
        <NavBar
          backIcon={null} back={<img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%AF%8F%E6%97%A5%E6%8F%90%E9%86%92/u1273.png' />} onBack={back}>
          <b className='shez-top-title' style={{ fontSize: '1rem' }}>设置</b>
        </NavBar>
      </div>
      <div className='shez-bottom'>
        <div className='shez-bottom-item'>
          <div className='shez-bottom-item-box' onClick={()=>{navigate('/profile')}}>
            <div className='shez-bottom-item-box-left' >
              <span>个人资料</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box' onClick={()=>{navigate('/account')}}>
            <div className='shez-bottom-item-box-left' >
              <span>账号与安全</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
        </div>
        <div className='shez-bottom-item'>
          <div className='shez-bottom-item-box' onClick={()=>{navigate('/soundscene')}}>
            <div className='shez-bottom-item-box-left' >
              <span>声音场景</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box' onClick={()=>{navigate('/notification')}}>
            <div className='shez-bottom-item-box-left' >
              <span>通知设置</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>实验室</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>Apple健康</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>高级</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
        </div>
        <div className='shez-bottom-item'>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>常见问题</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>意见反馈</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>去App Store评分</span>
            </div>
            <div className='shez-bottom-item-box-right'>
              <RightOutline />
            </div>
          </div>
          <div className='shez-bottom-item-box'>
            <div className='shez-bottom-item-box-left' >
              <span>关于</span>
            </div>
          </div>
        </div>
        <div className='shez-bottom-item'>
          <div className='shez-bottom-item-button'>
            <div className='shez-bottom-item-box'>
                <span onClick={() => { navigate('/') }}>退出账号</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
